<template>
    <div :style="{
        paddingLeft: Level * 30 + 'px'
    }">
        <div class="ArrayTitle">
            {{ Option.Label }}
            <span class="Right" @click="Add">+</span>
        </div>
        <component :is="ViewItem" :Option="Option" :DefaultValue="{}" :Level="_Level" ref="Element" />
    </div>
</template>
<script setup>
import { shallowRef, ref } from 'vue'
import DictionaryList from './DictionaryList.vue';

const props = defineProps(['Option', 'Type', 'Level', 'DefaultValue']);

// 获取子组件类型
const ViewItem = shallowRef();
const ViewMapping = {
    Default: DictionaryList,
}
const _Level = props.Level + 1;
ViewItem.value = ViewMapping[props.Option.ViewType];
const Element = ref();


function Add() {
    Element.value.add();
}

const GetValue = function () {
    return Element.value.GetValue()
}

const SetValue = function () { }


defineExpose({ GetValue, SetValue })


</script>
<style lang="less" scoped>
.ArrayTitle {
    border-bottom: 1px solid #ccc;
}

.Right {
    user-select: none;
    float: right;
    padding: 0 10px;
    cursor: pointer;
}
</style>

